<template>
	<div>
		<teleport to="body">
			<!-- 蒙版 -->
			<transition name="popup-mask">
				<div
					v-if="isVisible"
					@click="isVisible = false"
					class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
				></div>
			</transition>

			<!-- 内容 -->
			<transition name="popup-slide">
				<div
					v-if="isVisible"
					v-bind="$attrs"
					class="w-screen rounded-t bg-white dark:bg-zinc-800 z-50 fixed bottom-0"
				>
					<slot></slot>
				</div>
			</transition>
		</teleport>
	</div>
</template>

<script setup>
import { useScrollLock, useVModel } from '@vueuse/core'
import { watch } from 'vue'

const props = defineProps({
	modelValue: {
		required: true,
		type: Boolean,
	},
})

// 响应式数据，发生变化时自动触发emits
const isVisible = useVModel(props)

// 锁定滚动
const isLocked = useScrollLock(document.body)

watch(
	() => isVisible,
	(val) => {
		isLocked.value = val
	},
	{
		immediate: true,
	}
)
</script>

<style scoped lang="scss">
.popup-mask-enter-from,
.popup-mask-leave-to {
	opacity: 0;
}

.popup-mask-enter-active,
.popup-mask-leave-active {
	transition: all 0.3s;
}

.popup-slide-enter-from,
.popup-slide-leave-to {
	transform: translateY(100%);
}

.popup-slide-enter-active,
.popup-slide-leave-active {
	transition: all 0.3s;
}
</style>
